<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading" element-loading-text="拼命加载中" class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="company" is-root @adddepartments="adddepartmentsFn" />
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template v-slot="{ data }">
            <TreeTools :node-data="data" @deldepartments="deldepartmentsFn" @adddepartments="adddepartmentsFn" @editdepartments="editdepartmentsFn" />
          </template>
        </el-tree>
      </el-card>
      <AddDept ref="editDom" :showadd="showadd" :currentid="currentid" @offshowadd="offshowaddFn" @updata="updataFn" />
    </div>
  </div>
</template>

<script>
import { getdepartments, deldepartments } from '@/api/departments'
import { listToTree } from '@/utils/index'
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      currentid: '',
      showadd: false,
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: true

    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    async getDeparts() {
      const res = await getdepartments()
      this.list = listToTree(res.depts)
      this.loading = false
    },
    // 删除部门请求
    async deldepartmentsFn(id) {
      console.log(id)
      try {
        await this.$confirm('你确定要删除部门吗', '温馨提示', {
          type: 'warning'
        })
      } catch {
        return
      }
      await deldepartments(id)
      this.$message.success('删除成功')
      this.getDeparts()
    },

    // 控制展现添加部门是否
    adddepartmentsFn(id) {
      this.showadd = true
      this.currentid = id
    },
    // 控制展现编辑部门是否
    editdepartmentsFn(id) {
      this.currentid = id
      this.showadd = true

      this.$refs.editDom.backshow(id)
    },
    // 关闭添加部门界面
    offshowaddFn() {
      this.showadd = false
    },

    // 添加数据,通知父组件请求渲染
    async updataFn() {
      const res = await getdepartments()
      this.list = listToTree(res.depts)
    }
  }
}

</script>

<style scoped lang="scss">
  .tree-card {
    padding: 30px  140px;
    font-size:14px;

  }
  .app-container{
    margin: 20px;

  }

  ::v-deep {
  // 正常不折叠
  .el-tree-node__expand-icon {
    color: #000;
    font-size: 16px;
    &::before {
      content: "\e723";
    }
  }
  // 没有子节点的样式
  .el-tree-node__expand-icon.is-leaf {
    &::before {
      content: "\e7a5";
    }
  }

  // 折叠
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
    &::before {
      content: "\e722";
    }
  }
}

</style>
